{% extends '_base_only_content.html' %}
{% load static %}
{% load i18n %}

{% block title %}
    {% trans 'MFA' %}
{% endblock %}

{% block content %}
    <form class="m-t" role="form" method="post" action="">
        {% csrf_token %}
        {% if 'code' in form.errors %}
            <p class="red-fonts">{{ form.code.errors.as_text }}</p>
        {% endif %}
        <div class="form-group">
            <select id="verify-method-select" name="mfa_type" class="form-control" onchange="select_change(this.value)">
            {% for method in methods %}
                <option value="{{ method.name }}" {% if method.selected %} selected {% endif %} {% if not method.enable %} disabled {% endif %}>{{ method.label }}</option>
            {% endfor %}
            </select>
        </div>
        <div class="form-group" style="display: flex">

            <input id="mfa-code" required type="text" class="form-control" name="code" placeholder="{% trans 'Please enter the verification code' %}" autofocus="autofocus">
            <button id='send-sms-verify-code' type="button" class="btn btn-info full-width m-b" onclick="sendSMSVerifyCode()" style="width: 150px!important;">{% trans 'Send verification code' %}</button>

        </div>

        <button id='submit_button' type="submit" class="btn btn-primary block full-width m-b">{% trans 'Next' %}</button>
        <div>
            <small>{% trans "Can't provide security? Please contact the administrator!" %}</small>
        </div>
    </form>
    <style type="text/css">
    .disabledBtn {
        background: #e6e4e4!important;
        border-color: #d8d5d5!important;
        color: #949191!important;
    }
    </style>
    <script>

    var methodSelect = document.getElementById('verify-method-select');
    if (methodSelect.value !== null) {
        select_change(methodSelect.value);
    }

    function select_change(type){
        var currentBtn = document.getElementById('send-sms-verify-code');

        if (type == "sms") {
            currentBtn.style.display = "block";
            currentBtn.disabled = false;
        }
        else {
            currentBtn.style.display = "none";
            currentBtn.disabled = true;
        }
    }
    function sendSMSVerifyCode(){
        var currentBtn = document.getElementById('send-sms-verify-code');
        var time = 60
        var url = "{% url 'api-auth:sms-verify-code-send' %}";
        requestApi({
            url: url,
            method: "POST",
            success: function (data) {
                currentBtn.innerHTML =  `{% trans 'Wait: ' %} ${time}`;
                currentBtn.disabled = true
                currentBtn.classList.add("disabledBtn" )
                var TimeInterval = setInterval(()=>{
                    --time
                    currentBtn.innerHTML = `{% trans 'Wait: ' %} ${time}`;
                    if(time === 0) {
                        currentBtn.innerHTML = "{% trans 'Send verification code' %}"
                        currentBtn.disabled = false
                        currentBtn.classList.remove("disabledBtn")
                        clearInterval(TimeInterval)
                    }
                },1000)
                alert("{% trans 'The verification code has been sent' %}");
            },
            error: function (text, data) {
                alert(data.detail)
            },
            flash_message: false
        })
    }
    </script>
{% endblock %}
